<template>
  <view class="page-content flex-col">
    <view class="address">
      <view class="flex-col section" @click="handleToAddress">
        <view class="flex-col">
          <view class="flex-row">
            <image class="image_3" src="/static/common/address.png" />
            <text class="font ml-7" v-if="orderAddress"
              >{{ orderAddress.address }}{{ orderAddress.houseNumber }}</text
            >
          </view>
          <view class="flex-row mt-15" v-if="orderAddress">
            <text class="font ml-7">{{ orderAddress.contacts }}</text>
            <text class="font ml-7">{{ orderAddress.phone }}</text>
          </view>
        </view>
        <text class="self-start font_2 mt-15" v-if="!orderAddress"
          >请添加收货地址 ></text
        >
      </view>
    </view>
    <view class="goods">
      <view
        class="flex-row items-center group_4"
        v-for="(item, index) in goods"
        :key="index"
      >
        <view
          class="flex-col justify-start items-center shrink-0 image-wrapper"
        >
          <u-image
            height="100rpx"
            width="64rpx"
            :src="item.photo && item.photo.split(',')[0]"
          />
        </view>
        <view class="flex-col flex-1 group_5 ml-13">
          <text class="font text_2">{{ item.name }}</text>
          <view class="mt-22 flex-row justify-between items-center">
            <view class="flex-row items-center">
              <image class="shrink-0 image_5" src="/static/common/sun.png" />
              <text class="font text_3 ml-9">{{ item.needIntegral }}</text>
            </view>
            <text class="font text_4">×{{ num }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="submit-box">
      <view class="flex-row justify-between items-center group_6">
        <view class="flex-col">
          <text class="font_2 text_5 text_6"
            >共{{ goods.length }}件，需支付</text
          >
          <view class="mt-8 flex-row items-center text_5">
            <image class="image_5" src="/static/common/sun.png" />
            <text class="text_8 ml-9">{{ totalScore }}</text>
          </view>
        </view>
        <view
          class="flex-col justify-start items-center button"
          @click="handleShowOrder"
          ><text class="font text_7">确认支付</text></view
        >
      </view>
    </view>
    <u-modal v-model="show" :show-confirm-button="false" :show-title="false">
      <view class="slot-content">
        <view class="flex-col section_4">
          <text class="self-center font">您正在兑换商品</text>
          <view class="mt-30 flex-col self-stretch">
            <text class="font text_6"
              >商品兑换后订单将无法撤销，请确认后操作！</text
            >
            <view class="flex-row mt-25">
              <view
                class="flex-col justify-start items-center button"
                @click="show = false"
                ><text class="font_2 text_7">取消</text></view
              >
              <view
                class="flex-col justify-start items-center button_2 ml-7"
                @tap="handleSubmit"
                ><text class="font_2">确定支付</text></view
              >
            </view>
          </view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import shopping from "../../../../api/shopping";
import utils from "../../../../utils";
const app = getApp();
export default {
  data() {
    return {
      orderAddress: null,
      show: false,
      total: 0,
      num: 0,
      goods: [],
    };
  },
  computed: {
    totalScore: function () {
      let count = 0;
      for (let i = 0; i < this.goods.length; i++) {
        count = this.num * this.goods[i].needIntegral;
      }
      return count;
    },
  },
  onLoad(option) {
    let goodsId = option.goodsId;
    this.num = option.num;
    this.handleGetDetailById(goodsId);
  },
  onShow() {
    if (app.globalData.orderaddress) {
      this.orderAddress = app.globalData.orderaddress;
    }
  },
  methods: {
    handleShowOrder() {
      this.show = true;
      utils.checkSubscribe([
        "9eMMSUXg9LHIn1k8vOYTpDoR2_vIGDxGHicO5YTSVlc",
        "E-yCFuv9MVLhm2HR0UFyG9G8xjNAYkdNrw27qjHClCs",
      ]);
    },
    // 跳转到我的地址
    handleToAddress() {
      uni.navigateTo({
        url: "/page_index/me/components/address/address?urlname=seladdress",
      });
    },
    handleGetDetailById(id) {
      shopping.getGoodsById(id).then((res) => {
        if (res.code == 200) {
          this.goods.push(res.data);
        }
      });
    },
    handleSubmit() {
      uni.showLoading({
        title: "下单中",
        mask: true,
      });
      if (this.orderAddress && this.orderAddress !== null)
        shopping
          .submitOrder({
            addressId: this.orderAddress.id,
            productId: this.goods[0].id,
            num: this.num,
          })
          .then((res) => {
            uni.hideLoading();
            if (res.code === 200) {
              uni.showToast({
                title: "兑换成功",
                icon: "none",
              });
              setTimeout(() => {
                uni.switchTab({
                  url: "/pages/sun/sun",
                });
              }, 800);
            } else {
              uni.showToast({
                title: res.message,
                icon: "none",
              });
            }
          });
      else {
        uni.hideLoading();
        uni.showToast({
          title: "请填写地址",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  height: 100%;
  width: 100%;
  background-color: #ffffff;

  .address {
    padding: 0 32rpx;

    .ml-7 {
      margin-left: 14rpx;
    }

    .mt-15 {
      margin-top: 30rpx;
    }

    .section {
      padding: 32rpx 34rpx;
      background-color: #fff5bf;
      border-radius: 16rpx;

      .image_3 {
        width: 34rpx;
        height: 34rpx;
      }

      .font {
        font-size: 28rpx;
        font-family: PingFang SC;
        line-height: 26.24rpx;
        font-weight: 700;
        color: #000000;
      }

      .font_2 {
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 22.28rpx;
        color: #666666;
      }
    }
  }

  .goods {
    height: 100%;
    overflow-y: auto;
    padding: 0 32rpx;

    .ml-13 {
      margin-left: 26rpx;
    }

    .ml-9 {
      margin-left: 18rpx;
    }

    .group_4 {
      padding-top: 32rpx;

      .image-wrapper {
        padding: 30rpx 0;
        background-color: #f6f6f6;
        border-radius: 24rpx;
        width: 160rpx;
        height: 160rpx;

        .image_4 {
          filter: drop-shadow(0rpx 8rpx 4rpx #00000040);
          width: 64rpx;
          height: 100rpx;
        }
      }

      .group_5 {
        margin-right: 4rpx;

        .font {
          font-size: 28rpx;
          font-family: PingFang SC;
          line-height: 26.24rpx;
          font-weight: 700;
          color: #000000;
        }

        .text_2 {
          line-height: 34rpx;
          font-weight: unset;
        }

        .image_5 {
          width: 31.5rpx;
          height: 31.5rpx;
        }

        .text_3 {
          line-height: 20.78rpx;
        }

        .text_4 {
          color: #979797;
          line-height: 20rpx;
        }
      }
    }
  }

  .submit-box {
    padding: 20rpx 0;

    .ml-9 {
      margin-left: 18rpx;
    }

    .group_6 {
      padding: 0 32rpx;

      .font_2 {
        font-size: 24rpx;
        font-family: PingFang SC;
        line-height: 22.28rpx;
        color: #666666;
      }

      .text_5 {
        padding: 0 4rpx;

        .image_5 {
          width: 31.5rpx;
          height: 31.5rpx;
        }

        .text_8 {
          color: #000000;
          font-size: 32rpx;
          font-family: D-DIN;
          line-height: 22.78rpx;
        }
      }

      .text_6 {
        line-height: 23.9rpx;
      }

      .button {
        padding: 32rpx 0;
        background-color: #fbd610;
        border-radius: 68rpx;
        overflow: hidden;
        width: 402rpx;
        height: 88rpx;

        .font {
          font-size: 28rpx;
          font-family: PingFang SC;
          line-height: 26.24rpx;
          font-weight: 700;
          color: #000000;
        }

        .text_7 {
          line-height: 26.26rpx;
        }
      }
    }
  }

  .slot-content {
    .mt-25 {
      margin-top: 50rpx;
    }

    .ml-7 {
      margin-left: 14rpx;
    }

    .section_4 {
      padding: 56rpx 58rpx 48rpx 64rpx;
      background-color: #ffffff;
      border-radius: 48rpx;
      width: 576rpx;

      .font {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 700;
        color: #000000;
      }

      .text_6 {
        color: #ff3131;
        line-height: 38rpx;
        text-align: center;
      }

      .button {
        padding: 24rpx 0;
        background-color: #ececec;
        border-radius: 68rpx;
        overflow: hidden;
        width: 220rpx;
        height: 72rpx;

        .text_7 {
          line-height: 25.9rpx;
        }
      }

      .button_2 {
        padding: 24rpx 0;
        background-color: #fbd610;
        border-radius: 68rpx;
        overflow: hidden;
        width: 220rpx;
        height: 72rpx;
      }

      .font_2 {
        font-size: 28rpx;
        font-family: PingFang SC;
        line-height: 26.26rpx;
        font-weight: 700;
        color: #000000;
      }
    }
  }
}
</style>
